<template>
  <div style="display: inline-block;margin-right: 5px;">
    <Button type="primary"
            icon="md-add"
            class="button-add"
            @click="open">新增</Button>
    <Modal v-model="modal1"
           title="新增"
           ok-text="提交"
           :loading="loading"
           @on-ok="handleSubmit('formValidate')">
      <Form ref="formValidate"
            :model="formValidate"
            :rules="ruleValidate"
            :label-width="80">
        <FormItem label="用户名"
                  prop="name">
          <Input v-model="formValidate.name"
                 placeholder="请输入您的用户名" />
        </FormItem>
        <FormItem label="密码"
                  prop="password">
          <Input v-model="formValidate.password"
                 type="password"
                 placeholder="请输入您的密码" />
        </FormItem>
        <FormItem label="用户类型"
                  prop="userType">
          <Select v-model="formValidate.userType"
                  style="width: 150px">
            <Option v-for="item in userType"
                    :value="item.Id"
                    :key="item.Id">{{ item.TypeName }}</Option>
          </Select>
        </FormItem>
        <FormItem label="用户状态"
                  prop="userState">
          <Select v-model="formValidate.userState"
                  style="width: 150px">
            <Option v-for="item in userState"
                    :value="item.number"
                    :key="item.number">{{ item.text }}</Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import { editSystemUser } from '@/api/user'

export default {
  name: 'add',
  props: {
    userType: {
      type: Array
    }
  },
  data () {
    return {
      modal1: false,
      loading: true,
      userState: [
        {
          number: 0,
          text: '停用'
        },
        {
          number: 1,
          text: '启用'
        }
      ],
      formValidate: {
        name: '',
        password: '',
        userType: '',
        userState: null
      },
      ruleValidate: {
        name: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        userType: [
          { required: true, message: '请选择用户类型', trigger: 'change' }
        ],
        userState: [
          { required: true, message: '请选择用户状态', trigger: 'change', type: 'number' }
        ]
      },
      addData: {}
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.modal1 = false
      this.loading = true
      this.formValidate.name = ''
      this.formValidate.password = ''
      this.formValidate.userType = ''
      this.formValidate.userState = null
      this.addData = {}
      this.handleReset('formValidate')
    },
    open () {
      this.init()
      this.modal1 = true
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.addData.UserName = this.formValidate.name
          this.addData.Password = this.formValidate.password
          this.addData.UserType = this.formValidate.userType
          this.addData.State = this.formValidate.userState
          this.addData.SysUserId = localStorage.getItem('userId')
          editSystemUser(this.addData).then(res => {
            if (res.data.success) {
              this.modal1 = false
              this.loading = true
              this.$Message.info('添加成功!')
            }
            else {
              this.modal1 = true
              this.loading = false
              this.$Message.info('添加失败!')
            }
          }).then(() => {
            this.$emit('getList')
          })
        } else {
          this.modal1 = true
          this.loading = false
        }
      })
    },
    // 重置表单
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
